<template>
  <div>
    <a-form @submit="handleSubmit" style="width:60%;margin:0px auto;padding-top:30px;" :form="form">
      <a-form-item v-bind="formItemLayout" label="请输入收到的打款金额">
        <a-input :step="0.001" type="number" v-decorator="[
                      'money',
                      {rules: [{ required: true, message: '请输入收到的打款金额' }]}
                    ]" name="money" placeholder="请输入收到的打款金额" /> 元
      </a-form-item>
      <a-row>
        <a-col :xs="{ span : 24,offset:4 }" :sm="{ span:14 ,offset:10}" class="formGroupTitle">
          <div>
            <div>输入的金额必须与实际收到的打款一致</div>
            <div>打款账户名称：xx支付机构</div>
            <div>金额备注：打款验证</div>
          </div>
        </a-col>
      </a-row>

      <a-row>
        <a-col :xs="{ span : 24,offset:4 }" :sm="{ span:7 ,offset:10}">
          <a-button class="submitButton" html-type="submit" type="primary" :loading="loading">下一步</a-button>
        </a-col>
      </a-row>

    </a-form>
  </div>
</template>
<script>
  import api from "@/common/api";
  export default {
    data() {
      return {
        loading: false,
        money: "",
        form: this.$form.createForm(this),
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 9 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        }
      };
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log("Received values of form: ", values);
            this.money = values.money;
            this.moneyConfirm();
          }
        });
      },
      moneyConfirm() {
        this.loading = true
        const data = {
          checkAmount: this.money * 100
        };
        api.MoneyConfirm(
          data,
          res => {
            console.log("res", res);
            if (res.code == "OK") {
              this.loading = false,
                // this.doNext(9);
                this.$router.push({
                  path: "/OrgRegister/step10",
                  query: { success: "true" }
                });
            } else {
              this.loading = false,
                // this.$message.warning("验证失败");
                // this.$message.error(res.message);
                console.log(res.code);
              this.$router.push({
                path: "/OrgRegister/step10",
                query: { success: "false" }
              });
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      doNext(step) {
        var st = step + 1;
        this.$router.push("/OrgRegister/step" + st);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ant-input {
    width: 60%;
  }

  .formGroupTitle {
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .submitButton {
    width: 8vw;
  }
</style>